<template>
  <div class="rightBodyContent">
    <div class="rightBodyContent-in">
    <div class="commont-boxy">
      <p class="title-commont">今日发布
        <el-button type="primary" @click="addDayFood" size="small" class="getTodayLine">选择今日餐品</el-button>
      </p>

      <p class="commont-line-box">选择今日需要发布的餐品，选取后需对当日的餐品上传展示图</p>
      <div class="datanone" v-if="SelectionValNew.length==0">
        <i class="iconfont iconmeiyougengduo"></i>
        <p>请选择需要发布的餐品</p>
      </div>
      <div class="dataBody" v-else>
        <div class="last-day-list">
          <div class="last-day-list-box" v-for="(item, index) in fromOption" :key="index">
            <p class="last-day-list-topicon">
              <i class="iconfont iconshanchu detelIcon" @click="detelfoodList(index)"></i>
            </p>
            <div class="last-day-list-box-body">
              <div class="checkImgDialog width120 last-day-list-box-img"
                   :style="{backgroundImage:'url('+item.pic+')',backgroundSize:'cover',backgroundPosition:'center'}"
                   @click="viewImgDialog(index)" v-if="item.pic">
                <div class="imgpreviewBody">
                  <div class="imgpreview">
                    <i class="el-icon-view"></i>
                  </div>
                </div>
              </div>
              <div class="checkImgDialogNone width120 last-day-list-box-img" v-else @click="imgLoadUp(index)">
                <i class="iconfont iconshangchuan"></i>
                <p>点击上传展示图</p>
              </div>
              <p class="last-day-list-box-title">{{item.name}}</p>
            </div>
          </div>
        </div>
        <div class="saveBottonLine">
          <el-button type="primary" @click.native="addFoodrelease" size="small">保存</el-button>
        </div>
      </div>
    </div>
    <viewImgDialog :privaImgObj="imgsrcCheck" :visible.sync="dialogImgVisible"></viewImgDialog>
    <drawerBox @chooseFood="chooseFood" :visible.sync="dialogDrawerVisible" :SelectionValNew="SelectionValNew"></drawerBox>
    <form style="display: none" enctype="multipart/form-data">
      <input type="file" accept="image/*" @change="handleFile" class="hiddenInput" id="uploadFile" value=""/>
    </form>
  </div>
  </div>
</template>

<script>
  import viewImgDialog from '@/components/dialog/previewImgDialog.vue'
  import drawerBox from '@/components/dialog/drawerBox.vue'
  import {pagination} from '@/utils/util.js'

  export default {
    components: {
      viewImgDialog,
      drawerBox
    },
    data () {
      return {
        dialogImgVisible: false,
        dialogDrawerVisible: false,
        imgsrcCheck: '',
        page: {
          pageindex: pagination.pageIndex,
          pagesize: pagination.pageSize,
          total: pagination.total
        },
        SelectionValNew: [],
        fromOption: [],
        loadIndex: null
      }
    },
    created () {
      this.InitFn()
    },
    methods: {
      InitFn () {
        this.$post(this.api.food_list, {
          p: this.page.pageindex,
          name: '',
          cate_id: ''
        }).then((response) => {
          if (response.code === 0) {
            this.gridData = response.list.data
            this.page.total = response.list.total
          } else {
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      viewImgDialog (index) {
        this.dialogImgVisible = !this.dialogImgVisible
      },
      addDayFood () {
        this.dialogDrawerVisible = !this.dialogDrawerVisible
      },
      chooseFood (option) {
        this.fromOption = []
        this.SelectionValNew = option
        for (let i in option) {
          let arryList = {}
          arryList.id = option[i].id
          arryList.name = option[i].name
          arryList.pic = ''
          this.fromOption.push(arryList)
        }
      },
      detelfoodList (index) {
        this.SelectionValNew.splice(index, 1)
        this.fromOption.splice(index, 1)
      },
      addFoodrelease () {
        console.log(this.fromOption)
        let data_ = []
        let static_ = 1
        for (let i in this.fromOption) {
          let arry_ = {}
          arry_.dish_id = this.fromOption[i].id
          arry_.pic = ''
          data_.push(arry_)
          if (!this.fromOption[i].pic) {
            static_ = 2
          }
        }
        if (static_ === 2) {
          this.$message.error('请上传展示图')
          return
        }
        this.$post(this.api.release_add, {
          data: JSON.stringify(data_)
        }).then((response) => {
          if (response.code === 0) {
            this.$message({
              message: '发布成功',
              type: 'success'
            })
            this.SelectionValNew = []
            this.fromOption = []
          } else {
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      // 选择图片
      imgLoadUp (index) {
        this.loadIndex = index
        this.$el.querySelector('.hiddenInput').click()
      },
      // 上传图片 在打开文件夹选中图片确认后，执行handleFile函数
      handleFile (event) {
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        // 此处不能使用event.target，否则手机上不能显示
        let _self = this
        let file = document.querySelector('#uploadFile')
        let formData = new FormData()
        formData.append('file', file.files[0])
        $.ajax({
          type: 'post',
          url: 'upload/oldupload',
          data: formData,
          processData: false,
          // 告诉jQuery不要去设置Content-Type请求头
          contentType: false,
          dataType: 'json',
          success: function (data) {
            console.log(data)
            if (data.code === 0) {
              let option = _self.fromOption[_self.loadIndex]
              option.pic = data.data.name
              _self.$set(_self.fromOption, _self.loadIndex, option)// 动态添加
              setTimeout(() => {
                loading.close()
              }, 300)
            } else {
              _self.$message.error('失败')
            }
          },
          error: function (data) {
            this.$message.error('失败')
          }
        })
        event.target.value = ''
      }
    },
    mounted () {
    }
  }
</script>

<style lang="scss">
  /*@import url("//unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css");*/
</style>
